
<template>
    <div class="users">
        <div class="user_handle">
             <h1 class="title">用户列表</h1>
        </div>
       <div class="user_content">
           <el-table
            :data="tableData"
            stripe
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="ID"
            width="300">
            </el-table-column>
            <el-table-column
            prop="username"
            label="用户名"
            width="360">
            </el-table-column>
            <el-table-column
            prop="email"
            label="邮箱"
            width="480">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话"
            width="400">
            </el-table-column>
            <el-table-column
            prop="createTime"
            :formatter = "formatTime"
            label="注册时间"
            width="300">
            <template slot-scope="scope">
                <span>{{ scope.row.createTime |  formateDate }}</span>
            </template>
            </el-table-column>
        </el-table>
        <!-- <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>  -->
        
        <Pagination :total="total" :pagesize="pagesize" :currentPage="currentPage" @sendPage="handleCurrentChange1" @sendPageSize="handleCurrentChange1"></Pagination>

       </div>
    </div>
</template>

<script>
    import { users,commodity,category,order }  from "@/request/http.js"
    //时间转换
    import Time  from "@/utils/Time"
    import  Pagination  from "@/common/Pagination";
    
    export default {
        name:"Users",
        components:{
            Pagination
        },
        data(){
            return {
                tableData:[],
                total:0,
                pagesize:10,
                currentPage:1
            }
        },
        mounted(){
            this.getUsersData()
        },
        filters:{
            formateDate(time){
                console.log(time)
                return  new Date(time).toLocaleString()
            }
        },
        methods:{
            async getUsersData(){
                const res = await users()
                console.log(res);

                // commodity().then(res=>{
                //     console.log(res)
                //     this.tableData = res.data.data.list;
                //     this.total = res.data.data.total 
                // })
                    // category().then(res=>{
                    //     console.log(res)
                    //     this.tableData = res.data.data;
                    //     this.total = res.data.data.length 
                    //     console.log(this.total)
                    // })
                    // order().then(res=>{
                    //     console.log(res)
                    //     this.tableData = res.data.data.list;
                    //     this.total = res.data.total 
                    //     console.log(this.total)
                    // })


                this.tableData = res.data.data.list;
                this.total = res.data.data.total   
            },
            formatTime:function(row, column, cellValue, index){
                // console.log(row,  cellValue, index)

                // return  Time(cellValue)
                return  new Date(cellValue).toLocaleString()
            },
            handleSizeChange(psize){
                console.log(psize);
               this.pagesize  = psize;
               users({pageSize:this.pagesize}).then(res=>{
                   this.tableData  = res.data.data.list;
               })
            },
            handleCurrentChange(cpage){
               console.log(cpage);
               this.currentPage  = cpage;
               users({pageNum:this.currentPage}).then(res=>{
                   this.tableData  = res.data.data.list;
               })

            },
            handleCurrentChange1(cpage){
                console.log(cpage)
                
                users({pageNum:cpage}).then(res=>{
                   
                    this.tableData = res.data.data.list;

                })

            },
            handleCurrentChange1(pagesize){
               console.log(pagesize);
              
               users({pageSize:pagesize}).then(res=>{
                   this.tableData  = res.data.data.list;
               })

            },
        }

    }
</script>

<style lang="scss" scoped>
.users{
    width: 95%;
    margin:  0 auto;
}
.user_handle{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.title{
    font-weight: normal;
    display: inline-block;
}


</style>